<template>
	<view>
		<view class="box info-box">
			<my-good-item :list="data.cartInfo" />
		</view>
		<view class="box form-box">
			<view class="item">
				<view class="msg">
					退款原因
				</view>
				<view class="select" @click="onReason">
					<view>{{reason.length>0?reason[reason_i]:'请选择'}}</view> <up-icon color="#838A99" size="28rpx" name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="item textarea">
				<view class="msg">
					备注说明
				</view>
				<view class="textarea-box">
					<textarea name="" v-model="text" id="" cols="30" rows="10" placeholder="填写备注"></textarea>
				</view>
			</view>
			<!-- <view class="item">
				<view class="msg">
					图片上传
				</view>
				<view class="image">
					<up-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							:maxCount="1"
						></up-upload>
				</view>
			</view> -->
		</view>
		<button class="box btn" @click="onSubmit">
			提交
		</button>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import { orderRefundInfo,orderRefundApply,orderRefundReason } from "@/api/products"
	const  data=ref('')
	const reason=ref('')
	const reason_i=ref(0);
	const id=ref('')
	const text=ref('')
	onLoad( async(obj)=>{
		id.value=obj.id
		let res= await orderRefundInfo({id:obj.id})
		data.value=res.data
		res=await orderRefundReason()
		reason.value=res.data
	})
	const onReason=async ()=>{
		uni.showActionSheet({
			itemList: reason.value,
			success: function (res) {
				reason_i.value=res.tapIndex;
			}
		});
	}
	const onSubmit=async ()=>{
		if(text.value==''){
			return uni.$u.toast('请输入备注')
		}
		await orderRefundApply(id.value,{
			"text": reason.value[reason_i.value], 
			"refund_reason_wap_img": '', 
			"refund_reason_wap_explain": text.value, 
			"refund_type": 1, 
			"cart_ids": data.value.cartInfo.map((it)=>{return {cart_id:it.id,cart_num:it.cart_num}})
		})
		uni.hideLoading()
		uni.$u.toast('提交成功！');
		setTimeout(()=>{
			uni.navigateBack()
		},1500)
	}
</script>
<style>
	page{
		background: #F5F6FA;
	}
</style>
<style lang="scss">
	.info-box{
		padding:24rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}
	.form-box{
		.item{
			background-color: #fff;
			margin-top:20rpx;
			padding:0 32rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.msg{
				font-size:28rpx;
				padding:30rpx 0;
				display: flex;justify-content: space-between;align-items: center;
				.span{
					font-size: 24rpx;color:#aaa;
				}
			}
			.select{
				display: flex;justify-content: flex-end;align-items: center;
				font-size:28rpx;
			}
			&.textarea{
				padding-bottom: 30rpx;
				display: block;
			}
			.textarea-box{
				background: #f6f6f6;
				padding:15rpx;
				border-radius: 10rpx;
				textarea{
					height:220rpx;width:100%;
					font-size:26rpx;
				}
			}
		}
	}
	.btn{
		margin-top:40rpx;
		line-height: 84rpx;
		background: linear-gradient( 125deg, #FF9940 0%, #FD2A00 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-weight: bold;color:#fff;
		font-size:28rpx;
	}
</style>
